import React, { useEffect, useState } from "react"; import { META } from "@consumet/extensions"; import Link from "next/link"; import Layout from "../../components/layout"; import Head from "next/head"; import { closestMatch } from "closest-match"; import Content from "../../components/hero/content"; import { getServerSession } from "next-auth/next"; import { authOptions } from "../api/auth/[...nextauth]"; export default function Himitsu({ info, color, episodeList, episode1, subIndo, epIndo, sessions, progress, status, lastPlayed, }) { const [showText, setShowtext] = useState(false); const [load, setLoad] = useState(true); const [Lang, setLang] = useState(true); const [showAll, setShowAll] = useState(false); const episode = episodeList; const epi1 = episode1; const maxItems = 3; function handleEnLang() { setLang(true); } function handleIdLang() { setLang(false); } useEffect(() => { function getBrightness(color) { const rgb = color.match(/\d+/g); return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; } // set the text color based on the background color function setTextColor(element) { const backgroundColor = getComputedStyle(element).backgroundColor; const brightness = getBrightness(backgroundColor); if (brightness < 128) { element.style.color = "#fff"; // white } else { element.style.color = "#000"; // black } } const elements = document.querySelectorAll(".dynamic-text"); elements.forEach((element) => { setTextColor(element); }); setLoad(false); }, [color, sessions, info.id]); let episodeIndo = null; if (epIndo < 17) { episodeIndo = episode.slice(0, epIndo); } else { episodeIndo = episode; } async function handleUpdate(data) { if (!sessions) return; const res = await fetch("/api/update-user", { method: "POST", body: JSON.stringify({ name: sessions?.user.name, newData: { recentWatch: data, }, }), headers: { "Content-Type": "application/json", }, }); console.log(res.status); } // console.log(lastPlayed); return ( <> {info.title?.english || info.title.romaji}
{info ? (
{info.image && ( <>
)}
{/* MOBILE */}

{info.title.romaji || info.title.english}

Rate:

{info.rating}%

Format:

{info.type}

Status:

{info.status}

{epi1 && epi1[0] ? ( handleUpdate({ title: { romaji: info.title.romaji || info.title.english || info.title.native, }, description: info.description, coverImage: { extraLarge: info.image, }, id: parseInt(info.id), }) } >

{" "} WATCH

) : (

{" "} WATCH

)}
{/* PC */}

{info.title?.english || info.title.romaji || info.title.native}

{episode && episode.length} Episodes
{info.releaseDate}
{info.rating}%
{info.type}
{info.status}
Sub | {subIndo === null ? "EN" : "EN/ID"}

Relations
{info.relations.length > maxItems && (
setShowAll(!showAll)} > {showAll ? "show less" : "show more"}
)}
{info.relations && info.relations .slice(0, showAll ? info.relations.length : maxItems) .map((relation, index) => { return (
{relation.id}
{relation.relationType}
{relation.title.romaji}
{relation.type}
); })}

Episodes

{status && ( <>
{status} status
)}
{load ? (

Loading...

) : episode && Lang ? ( episode.map((episode, index) => { const item = lastPlayed?.find( (item) => item.id === episode.id ); return (
handleUpdate({ title: { romaji: info.title.romaji || info.title.english || info.title.native, }, description: info.description, coverImage: { extraLarge: info.image, }, id: parseInt(info.id), }) } href={`/anime/watch/${episode.id}/${info.id}/${ item ? `${item.time}` : "" }`} className={`text-start text-xl ${ episode.number <= progress ? "text-[#5f5f5f]" : "text-white" }`} >

Episode {episode.number}

{episode.title && (

"{episode.title}"

)}
); }) ) : subIndo === null ? (

No Episodes Available

) : ( <>
{episodeIndo.map((episode, index) => { return (
handleStore({ title: info.title?.english || info.title.romaji || info.title.native, description: info.description, image: info.image, id: info.id, }) } href={`/anime/watch?title=${encodeURIComponent( info.title?.romaji || info.title?.english )}&id=${subIndo}&idInt=${info.id}&epi=${ episode.number }&epiTitle=${encodeURIComponent( episode.title )}&te=${epIndo}&sub=id`} className="text-start text-xl" >

Episode {episode.number}

"{episode.title}" (Sub Indonesia)

); })}
)}
) : (

404

{`> Woops.. I think we don't have that Anime :(`}

Return to search
)}
); } export async function getServerSideProps(context) { context.res.setHeader( "Cache-Control", "public, s-maxage=10, stale-while-revalidate=59" ); const session = await getServerSession(context.req, context.res, authOptions); const { id } = context.query; if (!id) { return { notFound: true, }; } const provider = new META.Anilist(); const [info, episodes] = await Promise.all([ fetch(`https://api.moopa.my.id/meta/anilist/info/${id[0]}`).then((res) => res.json() ), provider.fetchEpisodesListById(id[0]), ]); if (!info) { return { notFound: true, }; } let episodeList = episodes; if (episodes.length === 0) { const res = await fetch( `https://api.moopa.my.id/anime/gogoanime/${ info.title.romaji || info.title.english }` ); const data = await res.json(); const match = closestMatch( info.title.romaji, data.results.map((item) => item.title) ); const anime = data.results.filter((item) => item.title === match); if (anime.length !== 0) { const infos = await fetch( `https://api.moopa.my.id/anime/gogoanime/info/${anime[0].id}` ).then((res) => res.json()); episodeList = infos.episodes; } } const ress = await fetch( `https://ani-api-eight.vercel.app/kuramanime/search?query=${ info.title.romaji || info.title?.english }` ); const yes = await ress.json(); // Clannad Fixer function convertToClannad(text) { const regex = /(? item.title.includes(fixedTitle)); let list = yes.list.map((item) => item.title); const match = closestMatch(fixedTitle, list); const anime = yes.list.filter((item) => item.title === match); slug = anime[0]?.slug; const inf = await fetch( `https://ani-api-eight.vercel.app/kuramanime/anime/${slug}` ); const dataInf = await inf.json(); epis = dataInf.episode; } let progress = null; let status = null; let lastPlayed = null; if (session) { const res = await fetch(`/api/get-media`, { method: "POST", body: JSON.stringify({ username: session?.user.name, }), headers: { "Content-Type": "application/json", }, }); const resp = await fetch(`/api/get-user?userName=${session?.user.name}`); const data = await resp.json(); lastPlayed = data?.recentWatch.filter( (item) => item.title.romaji === info.title.romaji )[0]?.episode; const prog = await res.json(); const gat = prog.lists.map((item) => item.entries); const git = gat.map((item) => item.find((item) => item.media.id === parseInt(info.id)) ); const gut = git?.find((item) => item?.media.id === parseInt(info.id)); if (gut) { progress = gut?.progress; if (gut.status === "CURRENT") { status = "Watching"; } else if (gut.status === "PLANNING") { status = "Planned to watch"; } else if (gut.status === "COMPLETED") { status = "Completed"; } else if (gut.status === "DROPPED") { status = "Dropped"; } else if (gut.status === "PAUSED") { status = "Paused"; } } } const color = { backgroundColor: `${info.color}` }; const epi1 = episodes.filter((epi) => epi.number === 1); const title = info.title?.userPreferred || "No Title"; return { props: { info: { ...info, title: { ...info.title, userPreferred: title, }, }, color, episodeList, episode1: epi1, subIndo: slug, epIndo: epis, sessions: session, progress: progress || null, status: status, lastPlayed: lastPlayed || null, }, }; }